<template>
    <div class="svg-box">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 820 600">

      <g>
       <g>
        <a>
         <path class="st0" d="M317,300.5l-4,1l-1,2l-2,1l-3,1l-1-2v-4l-4-4l-3-6l-6-4h-14l-2,2l-1,4h-3l-4,3l-2,2l-3-3l-3,4h-3l-6,2v-5
				l-4-5l-3,4l-3,1v-6l-3-2v-3v-3l-2-3l-11,1l-1-1l-3-2l-2-2l-4-1l2-2v-4l2-3v-4v-4l-4-2l1-2l2-2l2-3l-1-3l-3-2l-4-3l-4-4l1-2l1-1
				l4-1l-1-3l-3-3l-2-2l-6-2c0,0-5,4-8,7s-4,6-4,6v6l3,5l-4,4v5c0,0-1,4-2,6s-5,4-5,4v12l3,4v7c0,0-1,2-2,3s-3,2-4,3s-4,4-4,4l-7-4
				c0,0-3-1-4,0s-1,3-1,3l4,3l-1,2l-2,1l1,1h3v3l-1,4l-2,1v5h2v3h-1v4h-1v5l-7,7v4l2,2l-3,2v4l-2,2h-3l-3,1v3l1,1v4h3l1-1l2,1v5l2,4
				l-3,4l-3,5l1,1v2l2,3v2h-3l-3,3v5h-4l1,2v3l-2,3l2,1v5h-2v-3l-3,1l-4,10h-3l-10-11h-2l-1,5l2,4l-3,2l1,2l-1,1l1,3v5l-2,1v7l-2,2
				v4l6,3l-3,5l4,4v4h1v2l1,2l2-3l2,1h5v5l-1,2l1,2l4-3l2-3h5l1,3h3l3,3v3h-1v3l3,2l1,2l-3,2l2,1v5l1,1v4l-1,2l-1,1h-3l-1,2l1,2h2v1
				h2v3l1,2l1,2l3-2v-6l1-1h4l1,1h5l4-4l3-2l5-6l1,2h3l2,4h2v-3l-2-2l2-2l2,1v9l-1,1v8l-3,4v3l1,1v12l-3,4l5,5h3v-3l2-1c0,0,4,2,6,4
				s5,7,5,7h10l1,4h4l1,2l1-2l1-1v-4c0,0,1-2,2-2s2,2,2,2v3l3,4v8h3l3,2l1-1h3v-1h5l3-3h3l1,1h2v-2l1-2h5l2,4c0,0-1,3,1,3s3-3,3-3
				l2-2h4l3-3h4l3-5c3,0,5,6,6,6s3-2,3-2s4-1,4-2s-1-3-1-3l-2-3h-6v-3h-4c-2-5-1-12-1-12l1-2l1-3l2-2v-2l7-8v-2l1-1l1-1v-2l1-1l2-1
				l1-4c0,0,4-3,4-4s-1-2-1-3s1-2,1-3s-2-2-2-3s1-2,1-3c0-3-3-4-3-4h-7c-1-3,4-4,4-5s-1-2-1-2s-10-13-10-14s2-2,2-2l8-4v-3l2-2
				c0,0,3-1,3-2s-1-3-1-3v-4c0,0,4-2,4-4s-3-4-3-4v-3l-8-7v-2l-1-2l-1-3c0,0,0-4,0-6s-1-1-1-2s1-2,1-4s-1-3-1-4s2-4,2-5s3-1,3-1v-7
				c0,0,5-5,6-5s2,1,2,1l6-5c0,0,0-2,0-3s3-2,3-2v-4h2v-8c0,0,0-3-1-4s-4-3-4-5s1-2,1-2v-4l2-1v-4l1-1v-4l2-2l1-6l1-2l1-10
				c0,0,1.1-2.2,2.4-4.3l-3.4-0.7H317z"></path>
         <text transform="matrix(1.0001 0 0 1 154.9993 440.8234)" class="st1 st2 st3">盘县</text>
         <circle class="st4" cx="167" cy="418.5" r="8"></circle>
         <circle class="st5" cx="167" cy="418.5" r="4"></circle>
        </a>
       </g>                                                                                                                    <g>
       <a>
        <path class="st0" d="M395,184.5l1-2c0,0,15-13,15-14s-2-3-2-4s-2-4-2-5s-4-1-4-1l-5-7h5l6.9-8l-1.9-1l-3-1l-3-1l-7-6v-2h2v-3l1-2
					v-2l-2-2h-4l-2-3h-8l-4,4l-1,1h-1v-2l-1-2l-1-1v-2l-1-2v-3l-2-1v-1l1-1l-1-2l-2,1h-2h-1l-1-1v-3l-1-2l-1-2h-4v-2l3-2v-5l-1-1v-3
					l-2-2h-3v-2l2-1l-1-2l-3-2v-2l5-6l2-1v-2l-1-2v-2l-3-1h-3l-3-3h-2l-2-1l-1-1v-2l1-1l3-1l2-2v-2l-2-2l-1-1h-1l-2-1l-3-3h-7l-4-1
					h-2v-2l2-2l1-1l-1-1l-2-2l-1-2l1-1l2-1h4h1l1-1v-2h4v-4h-1v-4h-1v-6l1-1v-2h-1l-1-1l-2-1h-3h-3l-1,1l-1,1h-4v1h-2l-9,9l-1,1v2
					l-1,1l-1,1v2l-1,2h-2v1l1,1l1,1h1v1h1v3h-5l-1,1l-1,1v1h-1h-1v-2c0,0-1-1-2-1s-1,0-1,0l-1-1h-1v-1l-2-1l-1-1h-1l-1-1v-1l-1-1v-6
					l-2-1l-1-1h-1l-1-1h-1v-2l-2-1h-2l-1,1l-2,1v2l-2,1l-1,2l-2,1l-1,1l1,2v1l-1,1v1l-1,1v2l-1.5,3.5l-1,2l-2,1l-1,1v2h-2l-3.5,3.5
					h-2c0,0-2,2-2,3s1,2,1,2l2,4l3,3l1,4v2l1,2h3l1-3h2l1-2v-1l2-1h2v1l1,1l2,1l1-2h3l1,2l1,3l2-2l2-1l2-1l2,2v1l-2,2l2,1l2,2l2,6
					l-2,1l-1,2l-3,1h-2v2h2l3,2l-1,3l1,3l-3,2l-1,4h4l3,1v5l1,4l-2,2v2v1h3h3l3,1l3,3h4v-5v-2h1v-4l-2-3l1-2h2l1,1v4h10l2,3l2,1l-2,2
					v5h5l2,1v-4l3,3l1,1l3-1h3l2,1l-2,4l-2,3l-1,2l-3,1v2l3,4l-1,4l-3,3l-3-2h-4l-2-2l-4-4h-2l-5-1l-5-2l-2-1l-3,1l1,4l-2,2l-3,3
					c0,0-3,2-2,3s3,5,3,5h-2h-5l-4-2l-6-2l-2-2l-6-3v-3h-4l-4-2l-2-1h-2l-2,2h-2v-3v-5l-3-2l-4-2l-1-2v-3h5v-2l2-3l-1-5c0,0,3-1,3-2
					s2-3,2-3l1-2l-2-5l-3-5l-1-3h-2h-3l-4,3l-1,3h1v3l-1,1l1,4c0,0,3,2,3,3s-1,2-1,2h-5l-5,6h-3l-2-1l-1,1l1,5c0,0-2,0-3,2s0,3,0,3h2
					v5h-1v6l-1,1c0,0-3,0-3,1s1,1,1,2c0,2-5,0-5,2s6,3,6,5s-4,4-5,4s-4-4-4-4h-4l-13-6h-9c0,0-2,0-2,2s1,4,1,4h8l7,5l1,4c0,0,6,5,6,6
					s-3,5-3,5v3l4,6h4l1,1h2v6l1,1v3c0,0-2,1-2,2s1,1,1,1l5,6v5h-5l-2,3v7l-4,2h-8l-3,3h-5l-4,6v3l6,2l2,2l3,3l1,3l-4,1l-1,1l-1,2
					l4,4l4,3l3,2l1,3l-2,3l-2,2l-1,2l4,2v4v4l-2,3v4l-2,2l4,1l2,2l3,2l1,1l11-1l2,3v3v3l3,2v6l3-1l3-4l4,5v5l6-2h3l3-4l3,3l2-2l4-3h3
					l1-4l2-2h14l6,4l3,6l4,4v4l1,2l3-1l2-1l1-2l4-1h2l3.4,0.7c1.2-1.9,2.6-3.7,3.6-3.7c2,0,3,1,3,1h1v-4l7-4v-1h-4c0,0-2-1-3-3
					s4-4,4-5s-3-2-3-3s1-2,1-2s16-14,17-14s4,4,4,4l9,1c0,0,2-3,4-3s3,1,3,1s0.4,0.3,0.9,0.6l1.1-2.6l3-1l1-2l-1-2h1l2-2l-1-3l3-2
					l8-1v-7c0,0,3-2,3-3s5-3,5-3v-10c0,0,3-2,3-3s0-4,1-6s5-4,5-4v-6h2v-4h-3v-7h-10l-2-2v-4l-2-3v-4H395z"></path>
        <text transform="matrix(1.0001 0 0 1 297.9983 162.8234)" class="st1 st2 st3">水城县</text>
        <circle class="st4" cx="316" cy="140.5" r="8"></circle>
        <circle class="st5" cx="316" cy="140.5" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a>
        <path class="st0" d="M262,88.5l3,5l2,5l-1,2c0,0-2,2-2,3s-3,2-3,2l1,5l-2,3v2h-5v3l1,2l4,2l3,2v5v3h2l2-2h2l2,1l4,2h4v3l6,3l2,2
					l6,2l4,2h5h2c0,0-2-4-3-5s2-3,2-3l3-3l2-2l-1-4l3-1l2,1l5,2l5,1h2l4,4l2,2h4l3,2l3-3l1-4l-3-4v-2l3-1l1-2l2-3l2-4l-2-1h-3l-3,1
					l-1-1l-3-3v4l-2-1h-5v-5l2-2l-2-1l-2-3h-10v-4l-1-1h-2l-1,2l2,3v4h-1v2v5h-4l-3-3l-3-1h-3h-3v-1v-2l2-2l-1-4v-5l-3-1h-4l1-4l3-2
					l-1-3l1-3l-3-2h-2v-2h2l3-1l1-2l2-1l-2-6l-2-2l-2-1l2-2v-1l-2-2l-2,1l-2,1l-2,2l-1-3l-1-2h-3l-1,2l-2-1l-1-1v-1h-2l-2,1v1l-1,2
					h-2l-1,3h-3l-1-2v-2l-1-4l-3-3l-2-4l-1,2l-1,5l-2,5v3l5,1v5h1v3c0,0-3,2-3,3s2,2,2,2v4h2L262,88.5z"></path>
        <polygon class="st0" points="222,27.5 221,31.5 220,35.5 217,38.5 216,39.5 215,43.5 213,45.5 213,47.5 212,48.5 209,50.5
					209,54.5 210,56.5 210,58.5 208,59.5 208,62.5 208,64.5 211,66.5 214,67.5 214,70.5 213,71.5 214,73.5 215,75.5 217,75.5
					220,73.5 224,73.5 225,70.5 232,64.5 232,59.5 233,58.5 233,54.5 236,52.5 238,52.5 241,48.5 241,45.5 242,41.5 240,39.5
					241,37.5 239,34.5 239,30.5 238,29.5 235,29.5 233,31.5 231,35.5 229,37.5 226,37.5 224,35.5 223,31.5 			"></polygon>
        <text transform="matrix(1.0001 0 0 1 261.9983 116.8234)" class="st1 st2 st3">钟山区</text>
        <circle class="st4" cx="289" cy="130.5" r="8"></circle>
        <circle class="st5" cx="289" cy="130.5" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a class="map-a-hover" x="lz" @mouseover="changeData('lz')" @click="linkPage('lz')" :class="[(active === 'lz') ? activeClass:normalClass]">
        <path class="st6 mapclas" d="M551,256.5l-3,2l-11-10h-20l-3-3v-3l-1-1l-3,3h-4l-2-3h-3l-4,3h-2v-4l-1-1h-2l-2,4l-1,1h-2l-3-6h-1v-4h-3
					l-4-4v-3l2-1v-1v-2h-2v-1l1-2h2l4-3l-1-2v-1l2-1l1-2h1v-5l3-3l2-1l1-1v-3h2v-1h3v-3l1-2l-2-1l-1-1l-5-5v-7h-3l-1-1l1-1l1-2v-1
					l-1-2l-3-2h-5v-3h-2l-1,1v2h-3l-2,1l-2,2h-2l-2-1l-1-1v-7h-17l-3-3v-4h-2l-1,2h-1l-1-1l-1-2l-1-2v-1l5-4v-1h-8l-7-7h-5l-5,4h-2
					l-2-1h-3l-0.1,0l-6.9,8h-5l5,7c0,0,4,0,4,1s2,4,2,5s2,3,2,4s-15,14-15,14l-1,2h-6v4l2,3v4l2,2h10v7h3v4h-2v6c0,0-4,2-5,4
					s-1,5-1,6s-3,3-3,3v10c0,0-5,2-5,3s-3,3-3,3v7l-8,1l-3,2l1,3l-2,2h-1l1,2l-1,2l-3,1l-1.1,2.6c1.2,0.9,3.4,2.4,4.1,2.4
					c1,0,2-2,2-2l4-5h7l3,2l-1,3h-1h-2v9v4c0,0,1,2,1,3s5,7,5,7l-1,4c0,0-2,1-2,3s4,5,4,5l2,4h1l2,4l1,3l-1,2l4,9l2,3l2,2l3,1l1-2
					l1-1l-2-2v-2l1-1l5-5h4l2,1l1,1h4v1h2l1-1h4v1h4l3-1l3-2h4l3,3h1l2-2l4-1l2-1h6l3,1l3-3h4l1-1h2l1,1h3v-1l1-1v-1h1l1,2h4v-6l1-2
					l1-3h1v-1h3l4-5l1-1h1v-1h2v1h1v1h1v2h2v-2h1v-1h2v2h1v2h2v-1h1v-2l-1-1v-2h1l1-1v-4h1v-4h3v-3l-1-1v-14l3,1l5,7h1l2-1l2-1l3,2
					l1,2h2l2-1l-1-3l-1-2l2-1l2-1v-2l2-3h4l3,2h2l1-1v-7H551z"></path>
        <text transform="matrix(1.0001 0 0 1 455.9978 276.8234)" class="st1 st2 st3">六枝特区</text>
        <circle class="st4 outcirc" cx="480" cy="254.5" r="8"></circle>
        <circle class="st7 incirc" cx="480" cy="254.5" r="4"></circle>
       </a>
      </g>                                                                    </g>
     </svg>
	</div>
</template>
<script>
    import mapbg from '@/assets/images/map-bg.png'  //农业数据统计
    export default {
        name:'mapsvg',
        components: {
        },
        props: {
        },
        data () {
            return {
                mapbg,
				params:0,
                active:'lz',
                activeClass:'map-a-hover active',
                normalClass:'map-a-hover'
            }
        },
        computed: {
        },
        methods: {
            changeData(e){
                if(this.active===e) return false;
                this.active=e;
                this.$store.state.currentCounty=e;
                this.$emit('changeData',e)
            },
            linkPage(e){
                let _this=this;
                switch (e){
                    case 'lz':
                        _this.params='lz';
                        break;
                }
                this.$router.push({  //核心语句
                    path:'/countyView',   //跳转的路径
                    query:{           //路由传参时push和query搭配使用 ，作用时传递参数
                        id:_this.params ,
                    }
                })
            },
            init(){
                if(!this.$store.state.currentCounty){
                    this.$store.state.currentCounty=this.active;
                }else {
                    this.active=this.$store.state.currentCounty;
                }
                this.$store.state.bottomTitle=this.$store.state.currentCounty;
            }
        },
        mounted () {
            this.init()
        },
        created(){
        }
    }

</script>
<style type="text/css">
 .st0{fill:#05328A;stroke:#337FD6;stroke-miterlimit:22.9256;}
 .st1{fill:#6698FF;}
 .st2{font-family:'MicrosoftYaHei';}
 .st3{font-size:12px;}
 .st4{fill:#56688B;}
 .st5{fill:#2E3370;}
 .st6{fill:#262C8B;stroke:#337FD6;stroke-miterlimit:22.9256;}
 .st7{fill:#00FFFF;}
 .st8{fill:#262C8B;}

 .mapclas {
  fill: #1A1AD4;
  stroke: aqua;
  stroke-miterlimit: 10;
 }
 .active .mapclas{
  transition:fill 0.5s;
  fill:#0040FF;
 }

 .active .incirc{
  transition:fill 0.5s;
  fill:aqua;
  opacity:1;
 }
 .active .outcirc{
  transition:fill 0.5s;
  fill:#00CCFF;
  opacity:0.5;
  animation-name: zoom;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
 }

 a:hover .mapclas{
  fill:#0040FF;
  transition:fill 0.5s;
 }
 a:hover .incirc{
  fill:aqua;
  transition:fill 0.5s;
 }
 a:hover .outcirc{
  fill:#00CCFF;
  transition:fill 0.5s;
  opacity:0.5;
  /*鼠标移入时，外圆放大动画*/
  animation: zoom ease infinite 2s;
  /*!*animation-name: zoom;*!*/
  /*!*animation-duration: 2s;*!*/
  /*!*animation-timing-function: ease;*!*/
  /*!*animation-iteration-count: infinite;*!*/
  /*transform: ;*/
  -webkit-transform-origin: 50% 50% 0;
  /*-moz-transform-origin: 0 0;*/
  /*-o-transform-origin: 0 0;*/
  /*-ms-transform-origin: 0 0;*/
  /*opacity:0.6;*/
  /*fill:#fff200;*/
 }
 @keyframes zoom {
  0% {
   transform:scale(1,1);
   opacity:0.6;
  }
  50% {
   transform:scale(1,1);
   opacity:0.2;
  }
  100% {
   transform:scale(1,1);
   opacity:0.6;
  }
 }
</style>